<template>
  <page>
    <div class="map_container">
      <div id="pickerBox" class="map_picker_box">
        <input id="pickerInput" v-model="keyword" class="map_picker_input" placeholder="输入关键字选取地点" />
      </div>
      <div id="container" class="map" tabindex="0"></div>
      <div class="poi_info">
        <div class="cell">
          名称:{{poiInfo.name}}
        </div>
        <div class="cell">
          地址:{{poiInfo.address}}
        </div>
        <div class="cell">
          位置:{{poiInfo.location}}
        </div>
        <div class="cell">
          来源:{{poiInfo.source}}
        </div>
      </div>
    </div>
  </page>
</template>
<script>
import maploader from '@/util/maploader'
export default {
  data () {
    return {
      keyword: '',
      poiInfo: {
        address: "",
        location: "",
        name: "",
        source: "",
      }
    }
  },
  mounted () {
    const me = this;
    maploader.load().then(({ AMapUI, AMap }) => {
      var map = new AMap.Map('container', {
        zoom: 16,
        scrollWheel: true
      })
      AMapUI.loadUI(['misc/PoiPicker', 'misc/PositionPicker'], function (PoiPicker, PositionPicker) {
        var poiPicker = new PoiPicker({
          //city:'北京',
          input: 'pickerInput'
        });
        //初始化poiPicker
        poiPickerReady(poiPicker, PositionPicker);
      });

      function poiPickerReady (poiPicker, PositionPicker) {
        var positionPicker = new PositionPicker({
          mode: 'dragMap',
          map: map
        });
        positionPicker.start(map.getBounds().getSouthWest());

        positionPicker.on('success', function (positionResult) {
          me.poiInfo.name = positionResult.nearestPOI;
          me.poiInfo.source = '拖拽选点';
          me.poiInfo.location = positionResult.position;
          me.poiInfo.address = positionResult.address;
          me.poiInfo.name = positionResult.nearestPOI;
        });

        //选取了某个POI
        poiPicker.on('poiPicked', function (poiResult) {
          var source = poiResult.source,
            poi = poiResult.item,
            info = {
              source: source,
              name: poi.name,
              location: poi.location.toString(),
              address: poi.address
            };
          me.keyword = info.name;
          me.poiInfo.source = info.source
          me.poiInfo.name = info.name
          me.poiInfo.location = info.location
          me.poiInfo.address = info.address
          map.setCenter(new AMap.LngLat(parseFloat(poi.location.lng), parseFloat(poi.location.lat)));
          map.setZoom(18);
        });
      }
    })
  },
}
</script>
<style lang="scss" scoped>
.map_container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .map_picker_box {
    margin-top: 5px;
    height: 2rem;
    width: 100%;
    .map_picker_input {
      width: 100%;
      padding: 5px 5px;
      height: 2rem;
      font-size: 1.3rem;
      box-sizing: border-box;
    }
    .poi_info {
      background: #fff;
    }
  }
  .map {
    flex: 1;
    margin-top: 5px;
    margin-bottom: 5px;
    width: 100%;
  }
  .poi_info {
    padding: 0 0.5rem;
    font-size: 1.2rem;
    box-sizing: border-box;
    .cell {
      border-bottom: 1px solid #efefef;
      width: 100%;
      min-height: 1.5rem;
      line-height: 1.4rem;
      :last-child {
        border-bottom: 0;
      }
    }
  }
}

.amap_lib_placeSearch .poibox.highlight {
  background-color: #cae1ff;
}

.amap_lib_placeSearch .poi-more {
  display: none !important;
}
</style>